<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Edit Your List - C60</title>
        <script type="text/javascript">
        //<![CDATA[
            function addRow(table_id, field_id, field_name, field_stop, field_line, field_time) {
                var blank_row = document.getElementById('hack').firstChild.firstChild.cloneNode(true);
                var table = document.getElementById(table_id);
                var row = table.insertRow(table.rows.length);
                row.parentNode.replaceChild(blank_row, row);
                var t = blank_row.getElementsByTagName('input');
                t[0].value = field_id;
                t[2].value = field_name;
                t[3].value = field_stop;
                t[4].value = field_line;
                t[5].value = field_time;
                t[2].focus();
            }

            function removeRow(row_node) {
                var table = row_node.parentNode;
                table.deleteRow(row_node.rowIndex);
            }
            
            function tryRow(row_node) {
                var t = row_node.getElementsByTagName('input');
                return '/req?s=' + t[3].value + '&l=' + t[4].value + '&t=' + t[5].value;
                //,'','scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,location=no,status=no');
            }
        //]]>
        </script>
    </head>
    <body>
        <h3>Hello {{user_nickname}}!</h3>
        You can access your list on a mobile at <b><em>http://c60.appspot.com/u/{{app_nickname}}</em></b>
        <table id="hack" style="display:none;"><tbody><tr>
            <td style="display:none;"><input id="i" type="hidden" name="i" value="" /></td>
            <td><input type="button" onclick="removeRow(this.parentNode.parentNode)" value="X" /></td>
            <td><input type="text" name="n" value="" /></td>
            <td><input type="text" name="s" value="" /></td>
            <td><input type="text" name="l" value="" /></td>
            <td><input type="text" name="t" value="" /></td>
            <td><a href="#" target="_blank" onclick="this.href=tryRow(this.parentNode.parentNode);">try me!</a></td>
        </tr></tbody></table>
    
        <form method="post" action="">
        <p>
            <table id="page_list" border="1">
                <thead>
                <tr>
                    <th></th>
                    <th>Page Name</th>
                    <th>Stops</th>
                    <th>Lines</th>
                    <th>Within (minutes)</th>
                    <th></th>
                </tr>
                </thead>
            </table>
            <script type="text/javascript">
            //<![CDATA[
                {% if list_fields %}
                {% for fields in list_fields %}
                    addRow('page_list', '{{fields.0}}', '{{fields.1}}', '{{fields.2}}', '{{fields.3}}', '{{fields.4}}');
                {% endfor %}
                {% else %}
                    addRow('page_list', '', '', '', '', '');
                {% endif %}
            //]]>
            </script>
            <span style="color:green;">{{message_ok|default:""}}</span>
            <span style="color:red;">{{message_error|default:""}}</span>
            <br />
            <input type="button" onclick="addRow('page_list', '', '', '', '', '');" value="Add Row" />
            <input type="submit" value="Save List" />
        </p>
        </form>
        <a href="/u/{{app_nickname}}">Preview list</a> |
        <a href="{{logout_url|fix_ampersands}}">Sign out</a>
        <br />
    </body>
</html>